<template>
  <Button type="primary" @click="toggle">弹框</Button>
  <Modal :visible="modalProps.visible" :onCancel="toggle" > 尝试 </Modal>
</template>

<script lang="ts">
import { watchEffect, reactive } from "vue";
import { Modal, Button } from "ant-design-vue";

export default {
  components: {
    Modal,
    Button,
  },
  setup() {
    const modalProps = reactive({
      visible: false,
    });

    // 弹框taggle
    const toggle = () => {
      modalProps.visible = !modalProps.visible;
    };

    watchEffect(() => {
      console.log(modalProps);
    });

    return {
      modalProps,
      toggle,
    };
  },
};
</script>